<template>
  <div class="box">
    <div>Child2子组件</div>
    <div>普通方法</div>
    <div>普通获取数据: {{ $store.state.Child2.str }}</div>
    <div>辅助函数</div>
    <div>辅助函数获取: {{ str }}</div>

    <hr />

    <div>修改state中的数据</div>
    <div>普通修改</div>
    <button @click="$store.dispatch('getStr', '李四')">异步修改state中的数据</button>
    <div>辅助函数修改</div>
    <button @click="asyncGetStr">辅助函数修改state中的数据</button>

    <hr />

    <div>同步修改</div>
    <div>普通修改</div>
    <button @click="$store.commit('SET_STR', '马六')">同步修改state中的数据</button>
    <div>辅助函数修改</div>
    <button @click="GetStr">辅助函数同步修改state中的数据</button>

    <hr />

    <div>模块化getters的使用</div>

    <div>普通使用</div>
    <div>普通获取数据: {{ $store.getters.newStr }}</div>
    <div>辅助函数使用</div>
    <div>辅助函数获取: {{ newStr }}</div>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'Child2',
  // 声明计算属性
  computed: {
    // 使用模块化之后
    // 通过mapState辅助函数获取state中的数据时
    // 需要传递一个对象作为参数
    // 键: 自定义的属性名,但是一般为了语义化,都写成对应模块下想要获取的属性名
    // 值: 箭头函数,函数接收state作为形参
    // 函数内返回对应模块下的state数据

    // 组件模块化之后,除了使用辅助函数获取state中的数据有变化之后,其他辅助函数还是正常使用
    ...mapState({
      str: (state) => state.Child2.str
    }),
    ...mapGetters(['newStr'])
  },
  methods: {
    ...mapActions(['getStr']),
    ...mapMutations(['SET_STR']),
    asyncGetStr() {
      this.getStr('王五')
    },
    GetStr() {
      this.SET_STR('陈七')
    }
  }
}
</script>

<style scoped></style>
